<template>
  <div>
    <!--菜单上面控制展开折叠的按钮-->
    <div class="menu-button" @click="buttonCollapse"> ··· </div>
    <!--菜单整体的容器-->
    <!--
        一些容器参数的值含义：
        unique-opened: 是否选择之打开一个一级菜单
        border-right: 右边框边缘深化
        collapse: 展开/折叠按钮
        collapse-transition: 展开/折叠动画效果
        router: 是否启用vue的路由模式，启用该模式会在激活导航时以index作为path进行路由跳转
        (: == v-bind: == 动态数据绑定)
    -->
    <el-menu
        default-active="2"
        text-color="#f8e9e1"
        active-text-color="#63aeff"
        :unique-opened="true"
        :collapse="isCollapse"
        :collapse-transition="false"
        :router="true"
    >
      <!-- 菜单元素 el-menu-item -->
      <!-- 菜单元素的index值代表选中的哪个菜单,前面加一个 : 代表该菜单绑定的元素为变量，否则为常量
           常量绑定：  index="1"
           变量绑定： :index="item.id"
           注意: 变量绑定只允许绑定字符串，如果id是一个数字量的话要将其转化成字符串，方法为 id + ''
       -->
      <el-menu-item index="/baseData" >
        <!-- 菜单元素的模板区 -->
        <template>
          <!-- 一图标 -->
          <i class="el-icon-s-order"></i>
          <!-- 一文本 -->
          <span>鸟情光电监测预警</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/evaluate" >
        <template>
          <i class="el-icon-edit"></i>
          <span>遥感数据</span>
        </template>
      </el-menu-item>
      <el-submenu index="1" >
        <template slot="title">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">鸟类大数据</span>
        </template>
        <el-menu-item index="/prettyGood">
          <template>
            <i class="el-icon-tickets"></i>
            <span>数据采集</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/prettyGood2">
          <template>
            <i class="el-icon-data-analysis"></i>
            <span>鸟击事件</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/prettyGood3">
          <template>
            <i class="el-icon-data-analysis"></i>
            <span>鸟类威胁等级</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="/onlineServiceGraph">
        <template>
          <i class="el-icon-warning-outline"></i>
          <span>鸟类活动规律统计分析</span>
        </template>
      </el-menu-item>
      <el-submenu index="2" >
        <template slot="title">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">驱鸟设备</span>
        </template>
        <el-menu-item index="/notAccomplish">
          <template>
            <i class="el-icon-tickets"></i>
            <span>策略控制</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/notAccomplish2">
          <template>
            <i class="el-icon-tickets"></i>
            <span>设备配置</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="3" >
        <template slot="title">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">综合管理</span>
        </template>
        <el-menu-item index="/ServiceTimes">
          <template>
            <i class="el-icon-tickets"></i>
            <span>人员装备安排</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/ServiceTimes2">
          <template>
            <i class="el-icon-data-analysis"></i>
            <span>装备器材管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/ServiceTimes3">
          <template>
            <i class="el-icon-data-analysis"></i>
            <span>人员信息配置</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="/timeAnalyse">
        <template>
          <i class="el-icon-tickets"></i>
          <span>生态整治工作记录</span>
        </template>
      </el-menu-item>
      <el-submenu index="4" >
        <template slot="title">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">规章制度</span>
        </template>
        <el-menu-item index="/docCreate">
          <template>
            <i class="el-icon-tickets"></i>
            <span>学习考核</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/docCreate2">
          <template>
            <i class="el-icon-tickets"></i>
            <span>制度管理</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="/webService">
        <template>
          <i class="el-icon-warning-outline"></i>
          <span>报警日志管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/oldUpload">
        <template>
          <i class="el-icon-warning-outline"></i>
          <span>系统用户管理</span>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import collapse from "element-ui/packages/collapse";

export default {
  name: 'myCommonAside',
  data() {
    return {
      // 控制菜单展开折叠的变量(默认不折叠)
      isCollapse: false,
      // 控制菜单是否允许打开
      disabled: false,
    }
  },
  methods: {
    // 点击按钮，切换菜单的折叠和展开
    buttonCollapse(){
      this.isCollapse = !this.isCollapse;
      this.$emit('sonChange','我改变了');
    }
  },
}
</script>

<style lang="less" scoped>
//点开收起按钮的样式
.menu-button {
  ///*背景色*/
  background-color: #021c3a;
  /*背景行高*/
  line-height: 24px;
  /*字体尺寸*/
  font-size: 30px;
  /*字体颜色*/
  color: #ffffff;
  /*字体居中*/
  text-align: center;
  /*字体间隔*/
  letter-spacing: 0.2em;
  /*鼠标上去变小手*/
  cursor: pointer;
  /*设置圆角*/
  border-radius: 5px; /* 圆角半径，根据需要调整 */
  box-shadow: 2px 2px 5px rgba(234, 191, 191, 0.2); /* 阴影属性，根据需要调整 */
}
/*主菜单样式*/
.el-menu {
  background-color: #0a3047;
  border:0!important;
  text-align: left;
}
/*子菜单样式*/
/deep/.el-menu-item{
  background: #0a3047!important;
}
/*主菜单悬浮样式*/
/deep/.el-submenu__title:hover {
  color:white!important;
  background: #1890FF!important;
}

/*子菜单悬浮样式*/
/deep/.el-menu-item:hover {
  color: white !important;
  background: #1890FF !important;
}
</style>